<template>
	<view class="body" :style="{backgroundColor:color}">
		<view class="box" :style="{height:height?height + 'px':'auto',paddingTop:paddingTop?paddingTop+'px':'10px'}">
			<view class="header">
				<view @click="back" class="iconBox" v-if="backJudge">
					<uni-icons class="icon" type="left"></uni-icons>
				</view>
				<view class="title">{{title}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "navBar",
		data() {
			return {
				height: 0,
				paddingTop: 0
			};
		},
		props: {
			title: {
				type: String,
				default: '标题'
			},
			color: {
				type: String,
				default: 'white'
			},
			backJudge: {
				type: Boolean,
				default: false
			},
			backEvent: {
				type: Boolean,
				default: false
			}
		},
		mounted() {
			// #ifdef MP-WEIXIN
			this.height = wx.getMenuButtonBoundingClientRect().height
			console.log(this.height);
			this.paddingTop = wx.getMenuButtonBoundingClientRect().top
			console.log(this.paddingTop);
			// #endif
		},
		methods: {
			back() {
				
					uni.navigateBack()
				
			}
		}
	}
</script>

<style scoped lang="scss">
	//订单中心 用户中心 用户评价 搜索 订单详情 我的反馈 优惠卷 安全 设置 购物车 评价服务 地址详情 下单 申请售后 余额 会员
@font-face {
  font-family: "阿里妈妈数黑体";font-weight: 700;src: url("//at.alicdn.com/wf/webfont/Z6NGK12PNmYL/Oc13p9YjkKUC.woff2") format("woff2"),
  url("//at.alicdn.com/wf/webfont/Z6NGK12PNmYL/MAkU5q36NRqR.woff") format("woff");
  font-display: swap;
}

	.body {
		position: sticky;
		top: 0px;
		z-index: +99;
	}

	.box {
		width: calc(100vw - 40px);
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0px 20px;
		padding-bottom: 10px;

		.header {
			display: flex;
			align-items: center;

			.iconBox {
				.icon {
					font-weight: bold !important;
					font-size: 20px;
					margin-right: 5px;
				}
			}

			.title {
				font-weight: bold;
				font-family: '阿里妈妈数黑体';
			}
		}
	}
</style>